<template>
  <div class="post1">
    <el-row>
      <el-col :span="24" :xs="24">
        <h3>
          post
        </h3>
        <ul>
          <li class="post-item">
            <el-col :span="8">
              <img src="../../../static/blog-img/lp1.jpg" alt="">
            </el-col>
            <el-col :span="16" style="padding-left: 12px;">
              <p class="post-item-content">post-item</p>
              <h4 class="post-item-title">Party people in the house</h4>
              <p class="post-item-watcher">12 watcher</p>
            </el-col>
          </li>
          <li class="post-item">
            <el-col :span="8">
              <img src="../../../static/blog-img/lp1.jpg" alt="">
            </el-col>
            <el-col :span="16" style="padding-left: 12px;">
              <p class="post-item-content">post-item</p>
              <h4 class="post-item-title">Party people in the house</h4>
              <p class="post-item-watcher">12 watcher</p>
            </el-col>
          </li>
          <li class="post-item">
            <el-col :span="8">
              <img src="../../../static/blog-img/lp1.jpg" alt="">
            </el-col>
            <el-col :span="16" style="padding-left: 12px;">
              <p class="post-item-content">post-item</p>
              <h4 class="post-item-title">Party people in the house</h4>
              <p class="post-item-watcher">12 watcher</p>
            </el-col>
          </li>
          <li class="post-item">
            <el-col :span="8">
              <img src="../../../static/blog-img/lp1.jpg" alt="">
            </el-col>
            <el-col :span="16" style="padding-left: 12px;">
              <p class="post-item-content">post-item</p>
              <h4 class="post-item-title">Party people in the house</h4>
              <p class="post-item-watcher">12 watcher</p>
            </el-col>
          </li>
          <li class="post-item">
            <el-col :span="8">
              <img src="../../../static/blog-img/lp1.jpg" alt="">
            </el-col>
            <el-col :span="16" style="padding-left: 12px;">
              <p class="post-item-content">post-item</p>
              <h4 class="post-item-title">Party people in the house</h4>
              <p class="post-item-watcher">12 watcher</p>
            </el-col>
          </li>
        </ul>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'post1'
}
</script>

<style scoped lang="less">
.post1{
  h3{
    font-size: 18px;
    margin-bottom: 52px;
  }
  .post-item{
    /*height: 100px;*/
    overflow: hidden;
    margin: 4px 0px;
    img{
      width: 100%;
      height: 100%;
    }
    .post-item-content{
      color: #a1a1a1;
      font-size: 11px;
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .post-item-content:hover{
      color: #000;
      transition: color .15s ease-in-out;
    }
    .post-item-title:hover{
      color: #30336b;
      transition: color .15s ease-in-out;
    }
    .post-item-title{
      font-size: 16px;
      color: #000000;
    }
    .post-item-watcher{
      font-size: 11px;
      color: #878787;
      margin-top: 10px;
    }
  }
}
</style>
